<template>
<div id="homePage" >
			<div id="zhu" style="display: -webkit-flex;">
				<div style="width:600px;">
						<!--今日营业-->
						 <router-link to=""><div style="display: -webkit-flex;width:430px; height:75px; margin: 0 auto; background-color: rgb(243,156,18);margin-top: 15px;box-shadow:0 0 2px 2px #999;">
							<div style="width:92px; height: 75px;background-color: rgb(194,125,12);">
								<i class="el-icon-s-order" style="color: #fff;font-size:60px;margin: 7px;" ></i>
							</div>
							<div style="width:400px; height:30px; margin-left: 10px; text-align: center;">
								<span style="color: #fff; font-size:18px; font-weight: 400;letter-spacing:5px; ">本月营业</span><br />
								<span style="color: #fff; font-size:16px; font-weight: 200;line-height:40px;">￥ {{MonthlyBusinessData.monthTurnover}} 元</span>
							</div>
						</div></router-link>
						
						<!--今日库房-->
						
                                <div style="display: -webkit-flex;width: 430px; height:75px; margin: 0 auto; background-color: rgb(0,166,90);margin-top: 15px;box-shadow:0 0 2px 2px #999;">
                                    <div style="width:80px; height: 75px;background-color: rgb(0,133,72);">
                                        <i class="el-icon-s-shop" style="color: #fff;font-size:60px;margin: 10px;" ></i>
                                    </div>
                                    <div style="width:400px; height:30px; margin-left: 10px; text-align: center;">
                                        <span style="color: #fff; font-size:18px; font-weight: 400;letter-spacing:5px; ">本月接车台次</span><br />
                                        <span style="color: #fff; font-size:16px; font-weight: 200;line-height:40px;">{{MonthlyBusinessData.interiorMaintainAmount+MonthlyBusinessData.externalMaintainAmount}}台</span>
                                    </div>
                                </div>
                     
						
						<!--今日结算-->
						<div style="display: -webkit-flex;width: 430px; height:75px; margin: 0 auto; background-color: rgb(221,75,57);margin-top: 15px;box-shadow:0 0 2px 2px #999;">
							<div style="width:80px; height: 75px;background-color: rgb(177,60,45);">
								<i class="el-icon-s-claim" style="color: #fff;font-size:60px;margin: 10px;" ></i>
							</div>
							<div style="width:400px; height:30px; margin-left: 10px; text-align: center;">
								<span style="color: #fff; font-size:18px; font-weight: 400;letter-spacing:5px; ">本月站内维修台次</span><br />
								<span style="color: #fff; font-size:16px; font-weight: 200;line-height:40px;">{{MonthlyBusinessData.interiorMaintainAmount}}台</span>
							</div>
						</div>
						
						<!--接车台次-->
						<div style="display: -webkit-flex;width: 430px; height:75px; margin: 0 auto; background-color: rgb(0,192,239);margin-top: 15px;box-shadow:0 0 2px 2px #999;">
							<div style="width:80px; height:75px;background-color: rgb(0,154,191);">
								<i class="el-icon-s-tools" style="color: #fff;font-size:60px;margin: 10px;" ></i>
							</div>
							<div style="width:400px; height:30px; margin-left: 10px; text-align: center;">
								<span style="color: #fff; font-size:18px; font-weight: 400;letter-spacing:5px; ">本月站外维修台次</span><br />
								<span style="color: #fff; font-size:16px; font-weight: 200;line-height:40px;">{{MonthlyBusinessData.externalMaintainAmount}}台</span>
							</div>
						</div>
				</div>
				
				<div style="width: 600px;">
					<div>
						<router-view/>
					</div>
				</div>
			</div>
		</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
MonthlyBusinessData:{}
};
},
//计算属性
computed: {},
//方法集合
methods: {
	showInfo(){
		let _this=this;
		_this.$http.get(`http://localhost:8080/api/BusinessTodayAction/queryMonthlyOperatingData`).then(function (resp){
			_this.MonthlyBusinessData=resp.data;
		});
	}
},
//挂载完成（可以访问DOM元素）
mounted() {
	this.showInfo();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
#zhu{
        cursor:default;
        width: 1290px;
        height: 600px;
        margin: 0 auto; 
        box-shadow: 0 5px 5px rgba(0, 0, 0, .12), 0 0 50px rgba(0, 0, 0, .04);
        background-image: linear-gradient(to right, rgb(245,245,245), rgb(211,211,211));
    }
</style>